<!--/**
* 新增用户2*
*
* @author LWG
* @date 2022/8/9 14:54
* @since 1.0.0
*/-->
<template>
  <div>
    <el-row>

      <el-card>
        <el-button class="btn btnStyle1" @click="button1">新增数据</el-button>
        <el-button class="btn btnStyle1" @click="button2" type="primary" plain>数据分析</el-button>
        <!-- <el-button class="btn btnStyle1" @click="button3">访问次数</el-button> -->

        <div id="new2" style="width: 100%; height: 900px"></div>
      </el-card>
    </el-row>

  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "NumberOAUsers2",
  data() {
    return {
      showNum: 1,
      sureDelBox: ' '
    }
  },
  methods: {
    button1() {
      // console.log("新增数据")
      this.showNum = 1
      this.$router.push('/home/newUsers');
    },
    button2() {
      // console.log("数据分析")
      this.$router.push('/home/newUsers2');
    },
    button3() {
      this.$router.push('/test');

    }
  },

  mounted(item) {
    var chartDom = document.getElementById('new2');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '新增用户数据分析'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'center',
    data: [
      '最近新增',
      '注销用户',
      '新增用户',
      '普通用户新增',
      'Vip用户新增'
    ]
  },
  radar: [
    {
      indicator: [
        { text: '今日', max: 100 },
        { text: '昨日', max: 100 },
        { text: '前日', max: 100 },
        { text: 'other day', max: 100 }
      ],
      center: ['25%', '40%'],
      radius: 80
    },
    {
      indicator: [
        { text: '本周', max: 100 },
        { text: '上周', max: 100 },
        { text: '第三周', max: 100 },
        { text: '第二周', max: 100 },
        { text: '第一周', max: 100 }
      ],
      radius: 80,
      center: ['50%', '60%']
    },
    {
      indicator: (function () {
        var res = [];
        for (var i = 1; i <= 12; i++) {
          res.push({ text: i + '月', max: 100 });
        }
        return res;
      })(),
      center: ['75%', '40%'],
      radius: 80
    }
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
          value: [60, 73, 85, 40],
          name: '最近新增'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      data: [
        {
          value: [85, 90, 90, 95, 95],
          name: '注销用户'
        },
        {
          value: [95, 80, 95, 90, 93],
          name: '新增用户'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 2,
      areaStyle: {},
      data: [
        {
          name: '普通用户新增',
          value: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: 'Vip用户新增',
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
          ]
        }
      ]
    }
  ]
};
    myChart.setOption(option);

  }

}
</script>

<style>
.btnStyle1 {
  width: 120px;
  height: 50px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;

}
</style>

